/* eslint-disable no-unused-expressions */
<template>
  <div class="profileArea" v-cloak>
    <el-avatar :size="200" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
    <!-- 下面<p>暂时会报错 -->
    <!-- <p>{{this.userName}}</p> -->
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="作者名" prepend="form.userName">
        <el-input v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item label="绑定邮箱">
        <el-input :prepend="form.userMail" v-model="form.userMail" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="用户类型">
        <el-tag>{{form.userType}}</el-tag>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即更新</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'profile',
  data () {
    return {
      form: {
        userMail: '',
        userName: '',
        userType: '普通用户'
      },
      inputVisible: false,
      inputValue: '',
      userId: '',
      check: ''
    }
  },
  created () {
    this.userId = this.$route.params.id
    this.getUserProfile()
  },
  methods: {
    getUserProfile () {
      this.$axios({
        methods: 'POST',
        url: '/user/getUserProfile',
        params: {
          userId: this.userId
        }
      })
        .then((response) => {
          console.log(response)
          this.check = response.data.data[0]
          if (this.check === true) {
          // eslint-disable-next-line no-unused-expressions
            this.form.userMail = response.data.data[1]
            this.form.userName = response.data.data[2]
            if (response.data.data[3] === 0) {
              this.form.userType = '普通用户'
            } else if (response.data.data[3] === 1) {
              this.form.userType = '企业用户'
            }
          } else {
            alert('获取用户数据异常')
          }
          console.log(this.check)
        })
        .catch(function (error) { console.log(error) })
    },
    handleClose (tag) {
      this.form.dynamicTags.splice(this.form.dynamicTags.indexOf(tag), 1)
    },

    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    onSubmit () {
      if (this.form.userName !== '') {
        console.log(this.form.dynamicTags)
        this.$axios({
          methods: 'POST',
          url: '/user/updateUserProfile',
          params: {
            userId: this.userId,
            userName: this.form.userName
          }
        })
          .then((response) => {
            console.log(response)
            this.check = response.data.data[0]
            if (this.check === true) {
              alert('更新成功')
              this.getUserProfile()
            } else {
              alert('更新数据异常')
            }
            console.log(this.check)
          })
          .catch(function (error) { console.log(error) })
        console.log('submit!')
      }
    }
  }
}
</script>

<style scoped>
.profileArea{
  background-color: #fff;
  width: 70%;
  padding: 0 50px;
  display: flex;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  /* justify-content: space-between; */
  /* align-items: center; */
}
[v-cloak]{
    display: none;
}

.el-avatar{
  border: 1px solid #f3f3f3;
  margin-top: 40px;
  margin-right: 40px;
}
.el-form{
  width:50%;
  text-align:left;
  margin-top: 5%;
  margin-left: 2%;
}
.text {
    font-size: 18px;
  }

  .item {
    margin-bottom: 20px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }

  .ul{
      list-style: none;
  }

    .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }

</style>
